<template>
    <footer class="app-footer">
        <div class="footer-content">
            <div class="contact-section">
                <div class="contact-group">
                    <h3 class="contact-title">联系我们</h3>
                    <div class="contact-info">
                        <p class="contact-item">地址：北京市海淀区XXXXXXXXXXXX</p>
                        <p class="contact-item">邮箱：123456456@163.com</p>
                    </div>
                </div>

                <div class="contact-group">
                    <h3 class="contact-title">联系我们</h3>
                    <div class="contact-info">
                        <p class="contact-item">电话：12345678990</p>
                        <p class="contact-item">在线时间：周一至周日9:00-18:00</p>
                    </div>
                </div>
            </div>

            <div class="logo-section">
                <div class="footer-logo">
                    <img src="../../assets/images/footer/logo.png" />
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="copyright-info">
                <span class="copyright-text">版权所有：北京科技信息交流协会</span>
                <span class="divider">|</span>
                <span class="record-number">备案号：XXXXXXXXXXXX</span>
            </div>
        </div>
    </footer>
</template>

<script>
export default {
    name: "AppFooter",
};
</script>

<style lang="scss" scoped>
@import '@zkwq/business/dist/var.scss';
.app-footer {
    background: linear-gradient(135deg, $--color-primary 0%, $--color-primary-light-1 100%);
    color: white;
    padding: 40px 0 20px;
    font-family: "Microsoft YaHei", sans-serif;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-section {
    display: flex;
    gap: 40px;
    flex: 1;
}

.contact-group {
    width: fit-content;
}

.contact-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 20px 0;
    color: white;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item {
    font-size: 14px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.logo-section {
    display: flex;
    align-items: center;
    margin-left: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100px;
    }
}

.footer-bottom {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 20px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.copyright-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.copyright-text,
.record-number {
    color: rgba(255, 255, 255, 0.8);
}

.divider {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }

    .contact-section {
        flex-direction: column;
        gap: 30px;
    }

    .logo-section {
        margin-left: 0;
        justify-content: center;
    }

    .copyright-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .divider {
        display: none;
    }
}
</style>